<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<body>

<form  class="layui-card layui-form"  method="post" lay-filter="demo-val-filter" data-table-id="ProjectTable">

    <input type="hidden" name="id" th:if="${vo}" th:value="${vo.id}"/>
    <input type="hidden" name="type" value="1"/>
    <div class="layui-card-body padding-15">

        <div class="layui-form-item">
            <label class="layui-form-label ">项目图片</label>
            <div class="layui-input-block ">
                <img th:src="${vo?.img}" style="width: 78px;height: 78px">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">项目名称</label>
            <div class="layui-input-block ">
                <input type="text" name="title"   th:value="${vo?.title}"  readonly class="layui-input layui-bg-gray">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">服务合同</label>
            <div class="layui-input-block ">
                <input type="text" name="title"  th:if="${vo?.isNeedSignContract == 0}" value="无需签订合同"  readonly class="layui-input layui-bg-gray">
                <input type="text" name="title"  th:if="${vo?.isNeedSignContract == 1}" value="需要签订合同"  readonly class="layui-input layui-bg-gray">

            </div>
        </div>
        <th:block th:if="${vo?.isNeedSignContract == 1}">
            <div class="layui-form-item" >
                <label class="layui-form-label ">合同模版</label>
                <div class="layui-input-block ">
                    <select name="contractTplId"  disabled class="layui-input">
                        <th:block>
                            <th:block th:each="item:${contractTplList}">
                                <option th:value="${item.id}" th:text="${item.title}" th:selected="${item.id == vo?.contractTplId}"></option>
                            </th:block>
                        </th:block>

                    </select>
                </div>
            </div>
        </th:block>
        <th:block th:else>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label ">选择合同</label>
                <div class="layui-input-block ">
                    <select name="contractTplId"  disabled class="layui-input">
                        <th:block>
                            <th:block th:each="item:${contractTplList}">
                                <option th:value="${item.id}" th:text="${item.title}" th:selected="${item.id == vo?.contractTplId}"></option>
                            </th:block>
                        </th:block>

                    </select>
                </div>
            </div>
        </th:block>




        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">最高陪护限制人数</label>
                <div class="layui-input-inline">
                    <input type="number" name="numberLimit" readonly  th:value="${vo?.numberLimit}"  class="layui-input layui-bg-gray">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">每小时陪护价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price"  readonly th:value="${vo?.price}"  class="layui-input layui-bg-gray">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">护工佣金比例</label>
                <div class="layui-input-inline">
                    <div class="layui-input-group">

                        <input type="text" name="commissionRate" readonly  th:value="${vo?.commissionRate}"  class="layui-input layui-bg-gray">
                        <div class="layui-input-split layui-input-suffix layui-bg-gray">
                            %
                        </div>
                    </div>

                </div>
            </div>

        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label ">按阶段陪护价格</label>-->
<!--            <div class="layui-input-block ">-->

<!--            </div>-->
<!--        </div>-->

        <fieldset class="layui-elem-field" style="margin: 30px;">
            <legend>按类型陪护价格</legend>

                <div class="layui-card" id="stageBox" >

                    <div class="layui-row" style="margin-bottom: 10px" th:if="${projectStageList}" th:each="item,key:${projectStageList}" >
                        <div class="layui-col-xs3">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 60px">陪护类型</label>
                                <div class="layui-input-inline">
                                    <input type="hidden" th:name="|projectStageList[${key.index}].id|"  th:value="${item.id}" class="id-input">
                                    <input type="text" readonly th:name="|projectStageList[${key.index}].title|"  th:value="${item.title}"  class="layui-input layui-bg-gray">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 60px">陪护时段</label>
                                <div class="layui-input-inline" th:id="|time-range${key.index}|">
                                    <div class="layui-input-inline ">
                                        <input type="text" autocomplete="off" readonly th:name="|projectStageList[${key.index}].timeStart|" th:id="|time-range-star${key.index}|" th:value="${item.timeStart}" lay-options="{}"  class="layui-input time-range-star layui-bg-gray" placeholder="开始日期">
                                    </div>
                                    <div class="layui-input-inline">至</div>
                                    <div class="layui-input-inline">
                                        <input type="text" readonly autocomplete="off" th:name="|projectStageList[${key.index}].timeEnd|" th:id="|time-range-end${key.index}|" th:value="${item.timeEnd}" lay-options="{}" class="layui-input time-range-end layui-bg-gray" placeholder="结束日期">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs3">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 60px">陪护价格</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly th:name="|projectStageList[${key.index}].price|"  th:value="${item.price}"     class="layui-input layui-bg-gray">
                                </div>
                            </div>
                        </div>

                    </div>


                </div>


        </fieldset>








        <div class="layui-form-item">
            <label class="layui-form-label ">服务说明</label>
            <div class="layui-input-block layui-bg-gray" style="padding: 10px;"  th:utext="${vo?.content}">
            </div>
        </div>


        <div class="text-center layui-form-actions1">

            <button class="layui-btn layui-btn-danger" data-close  type='button'>关闭</button>
        </div>

    </div>
    <style>
        .layui-form-label{
            width: 96px;
        }
        .layui-input-block{
            margin-left: 126px;
        }
    </style>
</form>

<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var remove_ids = "";
        // select 事件
        form.on('select(isNeedSignContract)', function(data){
            console.log(data)
            var value = data.value; // 获得被选中的值
            if(value == 1){
                $("[name=contractTplId]").parent().parent().show();
            }else{
                $("[name=contractTplId]").parent().parent().hide();
            }

        });
        let num = $("#stageBox .layui-row").length;
        for (let i = 0; i < num; i++){
            laydate.render({
                elem: '#time-range'+i,
                type: 'time',
                range: ['#time-range-star'+i, '#time-range-end'+i]
            });
        }



        // document.querySelectorAll('.time-range').forEach(function(element) {
        //     laydate.render({
        //         elem: element,
        //         range: ['.time-range-star', '.time-range-end'],
        //         trigger: 'click',
        //         format: 'yyyy-MM-dd',
        //         value: element.value || '', // 从元素自身获取初始值
        //         done: function(value) {
        //             element.value = value; // 仅更新当前元素
        //         }
        //     });
        // });


       window.delStageBox = function(obj){
           var $row = $(obj).parent().parent().parent();
           var $idInput = $row.find(".id-input");
           console.log("Row element:", $row[0]);
           console.log("id-input element:", $idInput[0]);
           var id = $idInput.val();
           if(id!="" && id!=undefined){
               if(remove_ids==""){
                   remove_ids = id;
               }else{
                   remove_ids +=  ","+id;
               }
           }
           console.log("delStageBox", id);
           // 删除同一行的layui-row
           $row.remove();
           // 获取删除的name=id的value
           // var id = $(obj).parent().parent().find(".id-input").val();
           // console.log("delStageBox",id);
           // // 删除同一行的layui-row
           // $(obj).parent().parent().parent().remove();

       }
        window.addStageBox = function(){
            let index = num
            var html  = '<div class="layui-row" style="margin-bottom: 10px"  >\n' +
                '                <div class="layui-col-xs3">\n' +
                '                    <div class="layui-inline">\n' +
                '                        <label class="layui-form-label" style="width: 60px">陪护类型</label>\n' +
                '                        <div class="layui-input-inline">\n' +
                '                            <input type="text" name="projectStageList['+index+'].title"  value=""  class="layui-input">\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-xs5">\n' +
                '                    <div class="layui-inline">\n' +
                '                        <label class="layui-form-label" style="width: 60px">陪护时段</label>\n' +
                '                        <div class="layui-input-inline" id="time-range'+index+'">\n' +
                '                            <div class="layui-input-inline" >\n' +
                '                                <input type="text" autocomplete="off" name="projectStageList['+index+'].timeStart" value="" id="time-range-star'+index+'"  class="layui-input time-range-star" placeholder="开始日期">\n' +
                '                            </div>\n' +
                '                            <div class="layui-input-inline">至</div>\n' +
                '                            <div class="layui-input-inline">\n' +
                '                                <input type="text" autocomplete="off" name="projectStageList['+index+'].timeEnd" value="" id="time-range-end'+index+'" class="layui-input time-range-end" placeholder="结束日期">\n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-xs3">\n' +
                '                    <div class="layui-inline">\n' +
                '                        <label class="layui-form-label" style="width: 60px">陪护价格</label>\n' +
                '                        <div class="layui-input-inline">\n' +
                '                            <input type="text" name="projectStageList['+index+'].price"  value=""     class="layui-input">\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-xs1">\n' +
                '                    <div class="layui-inline">\n' +
                '                        <a type="button" class="layui-btn layui-btn-sm" onclick="delStageBox(this)">\n' +
                '                            <i class="layui-icon layui-icon-delete"></i>\n' +
                '                        </a>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '\n' +
                '\n' +
                '            </div>';

            $("#stageBox").append(html)
            laydate.render({
                elem: '#time-range'+index,
                type: 'time',
                range: ['#time-range-star'+index, '#time-range-end'+index]
            });
            num++;
            // window.tijiao = function (){
            //     var data = form.val('demo-val-filter');
            //     console.log(data)
            //     $.ajax({
            //         url: "/pcs/project/form",
            //         type: "POST",
            //         data: data,
            //         success: function (res) {
            //             console.log(res)
            //         }
            //     })
            //     alert(JSON.stringify(data));
            // }


        }
        form.on('submit(demo-submit)', function(data){
            var field = data.field; // 获取表单全部字段值
            var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
            var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
            // 显示填写结果，仅作演示用
           console.log(field)
            // 此处可执行 Ajax 等操作
            // …
            field.removeStageId = remove_ids;
            $.ajax({
                url: "/pcs/project/save",
                type: "POST",
                data: field,
                success: function (res) {
                    console.log(res)
                    if(res.code==1){
                        layer.msg("操作成功",{icon:1,time:1000},function () {
                            //刷新当前页
                            window.location.reload();
                        })
                    }else{
                        layer.msg(res.info,{icon:2,time:1000})
                    }
                }
            })
            return false; // 阻止默认 form 跳转
        });
    });

</script>





</body>
</html>

